import {BasePlugin} from 'amis-editor';

export default class AJCaptchaRendererPlugin extends BasePlugin {
    rendererName = 'aj-captcha-renderer';

    // 暂时只支持这个，配置后会开启代码编辑器
    $schema = '/schemas/UnkownSchema.json';

    // 用来配置名称和描述
    name = '行为验证码';
    description = '包含滑动拼图、文字点选两种方式，UI支持弹出和嵌入两种方式。';

    // tag，决定会在哪个 tab 下面显示的
    tags = ['表单项'];

    // 图标
    icon = 'fa fa-object-group';

    // 用来生成预览图的
    previewSchema = {
        // 用来生成预览图的
        type: 'aj-captcha-renderer',
        fieldName:'captchaVerification',
        captchaType: 'blockPuzzle',
        mode: 'fixed',
        getCaptchaUrl: 'post:/api/captcha/get',
        checkCaptchaUrl: 'post:/api/captcha/check',
        vSpace: 0,
        imgSize: {
            width: '310px',
            height: '200px',
        },
        barSize: {
            width: '310px',
            height: '40px',
        },
        setSize: {
            imgHeight: 200,
            imgWidth: 310,
            barHeight: 0,
            barWidth: 0,
        }
    };

    // 拖入组件里面时的初始数据
    scaffold = {
        // 拖入组件里面时的初始数据
        type: 'aj-captcha-renderer',
        fieldName:'captchaVerification',
        captchaType: 'blockPuzzle',
        getCaptchaUrl: 'post:/api/captcha/get',
        checkCaptchaUrl: 'post:/api/captcha/check',
        mode: 'fixed',
        vSpace: 0,
        imgSize: {
            width: '310px',
            height: '200px',
        },
        barSize: {
            width: '310px',
            height: '40px',
        },
        setSize: {
            imgHeight: 200,
            imgWidth: 310,
            barHeight: 0,
            barWidth: 0,
        }
    };

    // 右侧面板相关
    panelTitle = '行为验证码组件配置';
    panelControls = [
        {
            type: 'tabs',
            tabsMode: 'line',
            className: 'm-t-n-xs',
            contentClassName: 'no-border p-l-none p-r-none',
            tabs: [
              {
                title: '常规',
                controls: [
                  {
                    name: 'fieldName',
                    label: '字段名',
                    type: 'text',
                    required: true,
                  },
                  {
                    name: 'captchaType',
                    label: '验证码类型',
                    type: 'select',
                    options: [
                      {
                        label: "文字点选",
                        value: "clickWord"
                      },
                      {
                        label: "滑动拼图",
                        value: "blockPuzzle"
                      }
                    ]
                  },
                  {
                    name: 'getCaptchaUrl',
                    label: '验证码获取请求',
                    type: 'text'
                  },
                  {
                    name: 'checkCaptchaUrl',
                    label: '验证码验证请求',
                    type: 'text'
                  }
                ]
              },
              {
                title: '外观',
                controls: []
              }
            ]
          }
    ];
}